import { GlBadge } from '@gitlab/ui';
import { mountExtended } from 'helpers/vue_test_utils_helper';
import VulnerabilityListStatus from 'ee/security_dashboard/components/shared/vulnerability_report/vulnerability_list_status.vue';

describe('Vulnerability list status component', () => {
  let wrapper;

  const createWrapper = ({ state, dismissalReason } = { state: 'DISMISSED' }) => {
    wrapper = mountExtended(VulnerabilityListStatus, {
      propsData: {
        state,
        dismissalReason,
      },
    });
  };

  const findGlBadge = () => wrapper.findComponent(GlBadge);
  const findStateText = () => wrapper.findByTestId('state-text');

  it('has correct css classes', () => {
    createWrapper();

    expect(wrapper.classes('gl-display-flex')).toBe(true);
    expect(wrapper.classes('gl-flex-wrap')).toBe(true);
    expect(wrapper.classes('gl-gap-2')).toBe(true);
    expect(findStateText().classes('gl-text-transform-capitalize')).toBe(true);
  });

  it('shows state text', () => {
    createWrapper({ state: 'DETECTED' });

    expect(findStateText().text()).toBe('Needs triage');
  });

  describe('gl-badge', () => {
    it('does not render when state is NOT "DISMISSED" even when there is a dismissalReason', () => {
      createWrapper({ state: 'DETECTED', dismissalReason: 'USED_IN_TESTS' });

      expect(findGlBadge().exists()).toBe(false);
    });

    describe('when state is "DISMISSED"', () => {
      it('does not render when there is no dismissalReason', () => {
        createWrapper({ state: 'DISMISSED' });

        expect(findGlBadge().exists()).toBe(false);
      });

      it('is rendered and shows dismissal reason text when it has a dismissalReason', () => {
        createWrapper({ state: 'DISMISSED', dismissalReason: 'USED_IN_TESTS' });

        const badge = findGlBadge();

        expect(badge.isVisible()).toBe(true);
        expect(badge.props()).toMatchObject({ variant: 'neutral', size: 'sm' });
        expect(badge.text()).toBe('Used in tests');
      });
    });
  });
});
